<template>
	<view style="background-color: #F1F1F1;height: 100vh;">
		<view class="main">
			<view class="login-main-title">
				<text class="text">{{titleName}}费</text>
				<!-- <text class="location">位置</text> -->
			</view>
			<view class="main-main">
				<uni-steps :options="list2" active-color="#18ab4e" :active="active" direction="column" />
				<!-- <button type="primary" @click="change">改变状态</button> -->
			</view>
			<view class="mian-bottom">
				<view class="">
					<checkbox :checked="checked" color="#4CD964" @tap="checkboxChange"></checkbox>  我已阅读并同意 <服务协议>
				</view>
			</view>
			<view class="main-less">
				<button style="color: #FFFFFF;background-color: #4CD964;" @click="change">下一步</button>
			</view>
		</view>
		<view>
			
		</view>
	</view>
</template>

<script>
	import UniSteps from '../../components/uni-steps/uni-steps'
	export default {
		components: {UniSteps},
		data() {
			return {
				checked:false,
				titleName:'',
				titleId:0,
				kHao:'',
				kName:'国网四川电费',
				
				active: 1,
				list1: [
						{title: '事件一'},
						{title: '事件二'},
						{title: '事件三'},
						{title: '事件四'}
					],
				list2: [
						{title: '收费单位',desc: '国网四川电费',show:true},
						{title: '缴费账户',desc: '',show:false}
					],
				checkboxItems: [{
						name: 'USA',
						value: '我已阅读并同意'
					}
				],
			}
		},
		onShow() {
			
		},
		onLoad(options) {
			if(options.kHao){
				this.kHao = options.kHao
				this.list2 = [
					{title: '收费单位',desc: '国网四川电费',show:true},
					{title: '缴费账户',desc: options.kHao,show:false}
				]
			}
			// if(options.title){
			// 	this.titleName = options.title
			// }
			
			// if(options.Id){
			// 	this.titleId = options.Id
			// }
			
			this.titleName = uni.getStorageSync('ele').title;
			this.titleId = uni.getStorageSync('ele').Id
			
		},
		methods: {
			checkboxChange(){
				this.checked = !this.checked
			},
			change() {
				if(this.kHao === ''){
					uni.showToast({
						icon: "none",
						title: '请填写缴费账户'
					})
					return
				}
				if(this.checked){
					uni.navigateTo({
						url: 'costValue?kHao='+ this.kHao + '&kName=' + this.kName + "&Id=" + this.titleId
					});
				}else{
					uni.showToast({
						icon: "none",
						title: '请勾选服务协议'
					})
				}
				// uni.navigateTo({
				// 	url: 'costValue'
				// });
			}
		}
	}
</script>

<style lang="scss">
	.login-main-title {
		height: 10vh;

		.text {
			line-height: 10vh;
			font-weight: 600;
		}

		.location {
			line-height: 10vh;
			font-weight: 600;
			float: right;
		}

	}
	.main-main{
		background-color: white;
		padding-bottom: 5vh;
	}
	.main {
		margin-left: 5vw;
		margin-right: 5vw;
	}
	
	.mian-bottom{
		text-align: center;
		margin-top: 5vh;
	}
	.main-less{
		margin-top: 2vh;
	}
</style>
